<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>冒泡事件及阻止事件冒泡</title>
<style type="text/css">
 #content{ width:200px; border:1px solid red; background-color:skyblue;}
 </style>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript">

      /*$(function(){
		  //span的事件
		 $("span").bind("click",function(){
			  var txt=$("#msg").html()+"<p>内层的span元素被点击了</p>";
			  $("#msg").html(txt);
			  
			  
			  });
			
			//外层的div事件
           $("#content").bind("click",function(){
			  var txt=$("#msg").html()+"<p>外层的div元素被点击了</p>";
			  $("#msg").html(txt);
			  });
			  
			   $("body").bind("click",function(){
			  var txt=$("#msg").html()+"<p>body元素被点击了</p>";
			  $("#msg").html(txt);
			  });
			  
			  //事件的冒泡:顺序:从里到外  从上到下  span div body 
		  })*/
		  
		  ////阻止事件的冒泡
		  
		  $(function(){
		  //span的事件
		 $("span").bind("click",function(e){
			  var txt=$("#msg").html()+"<p>内层的span元素被点击了</p>";
			  $("#msg").html(txt);
			  e.stopPropagation();//阻止事件的冒泡
			  
			  });
			
			//外层的div事件
           $("#content").bind("click",function(e){
			  var txt=$("#msg").html()+"<p>外层的div元素被点击了</p>";
			  $("#msg").html(txt);
			    e.stopPropagation();//阻止事件的冒泡
			  });
			  
			   $("body").bind("click",function(){
			  var txt=$("#msg").html()+"<p>body元素被点击了</p>";
			  $("#msg").html(txt);
			  });
			  
			 
		  })
		  

</script>
</head>

<body>

<div id="content">
       外层div元素<br />
       <span>内层的span元素</span><br />
       外层div元素
</div>
<div id="msg"></div>

</body>
</html>
